<template>
  <el-dialog
  title="上传证书"
  :visible="isShowUploadFile"
   width="40%"
   :close-on-click-modal="false"
   @close="$emit('close')"
  >
  <el-upload
        accept=".pdf,image/jpg,image/jpeg,image/png"
        :action="baseUrl +'/api/localStorage'"
        :before-upload="handleBeforeUpload"
        :headers="authHeader"
        class="upload-demo"
        :limit="1"
        :on-change="handleChange"
        :on-exceed="handleExceed"
      >
        <el-button type="primary">证书上传</el-button>
        <template #tip>
          <div class="el-upload__tip">
            只能上传一个图片或pdf格式的文件
          </div>
        </template>
      </el-upload>
      <el-button type="primary" class="prviewBtn">
        <a class="file-upload-link" :href="url" target="_blank">预览</a>
      </el-button>
  <span slot="footer" class="dialog-footer">
    <el-button @click="$emit('close')">取 消</el-button>
    <el-button type="primary" @click="onConfirm">确 定</el-button>
  </span>
</el-dialog>
</template>

<script>
import { mapGetters } from "vuex";
import { getToken } from "@/utils/auth";
export default {
  props:{
   isShowUploadFile:{
     type: Boolean,
     default: false
   }
  },
  data () {
    return {
       url: '',
       baseUrl: process.env.VUE_APP_BASE_API,
    }
  },
  computed: {
    authHeader() {
      return { Authorization: getToken() };
    }
  },
  methods: {
    onConfirm(){
      if(!this.url)return this.$message.error('请选择需要上传的证书')
      this.$emit('getFileUrl',this.url)
      this.$emit('close')
      this.$message.success('上传成功')
    },
     // 文件上传前触发
    handleBeforeUpload(file) {
      // 拿到文件后缀名
      const fileType = file.name.substring(file.name.lastIndexOf(".") + 1);
      // console.log("文件上传类型", fileType);
      // 当然拉我的需求是只需要图片和pdf，大家有需要可以在此处扩展
      const isJpg = fileType === "jpg";
      const isPng = fileType === "png";
      const isJpeg = fileType === "jpeg";
      const isPdf = fileType === "pdf";
      // 根据后缀名判断文件类型
      if (!isJpg && !isPng && !isJpeg && !isPdf) {
        this.$message.error(
          "只能上传图片和pdf格式的文件！",
          "error",
          "vab-hey-message-error"
        );
        return false;
      }
      return isJpg || isPng || isJpeg || isPdf;
    },

    // 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
    handleChange(uploadFile, uploadFiles) {
      // 文件上传成功之后保存后端返回的路径
      if (uploadFile.response) {
        uploadFile.response.path = uploadFile.response.path.slice(4);;
       this.url = process.env.VUE_APP_BASE_API + uploadFile.response.path;
      }
    },
    // 文件超出上传限制 此方法是和:limit绑定的                              范围时就会触发这个函数
    handleExceed(files, uploadFiles) {
      this.$message.error(
        "只能上传一个文件，如有需要请删除上一个文件再进行上传"
      );
    },
  }
}
</script>

<style scoped lang="scss">
.file-upload {
  display: flex;
  justify-content: space-between;
  .file-upload-link {
    color: white;
  }
  .file-upload-link:visited {
    color: white;
  }
}
.el-upload__tip {
  color: red;
  margin: 15px 0;
}
.prviewBtn {
  margin-top: 50px;
}
</style>
